<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 搜索 -->
        <el-form ref="form2">
          <div class="filter-container">
            <el-form-item>
              <el-input
                style="width: 200px;"
                class="filter-item"
                v-model="search"
              ></el-input>
              <el-button class="filter-item" size="small" type="primary" @click="empty">清空</el-button>
              <el-button
                class="filter-item"
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="searchitem"
              >搜索</el-button>
            </el-form-item>
            <el-button
              class="filter-item fr"
              size="small"
              style="margin-left: 10px;"
              type="primary"
              icon="el-icon-edit"
              @click="dialogFormVisible = true"
            >新增学科</el-button>
          </div>
        </el-form>
        <el-alert
          type="info"
          class="alert"
          show-icon
        >数据一共{{total}}条</el-alert>
        <!-- end -->
        <!-- 数据 -->
        <el-table
    :data="tableData"
    border:false
    fit
    highlight-current-row
    style="width: 100%">
    <el-table-column
      width="80"
      type="index"
      label="序号">
    </el-table-column>
    <el-table-column
      prop="subjectName"
      label="学科名称"
      width="130">
    </el-table-column>
    <el-table-column
      prop="username"
      label="创建者">
    </el-table-column>
    <el-table-column
      prop="addDate"
      width="180"
      label="创建日期">
    </el-table-column>
    <el-table-column
      prop="isFrontDisplay"
      label="前台是否显示">
    </el-table-column>
    <el-table-column
      prop="twoLevelDirectory"
      label="二级目录">
    </el-table-column>
    <el-table-column
      prop="tags"
      label="标签">
    </el-table-column>
    <el-table-column
      prop="totals"
      label="题目数量">
    </el-table-column>
    <el-table-column
    prop="id"
    width="220"
      label="操作">
      <template slot-scope="{row}">
       <router-link :to="{path:'directorys',query:{...row}}">
          <el-button type="text" size="small" class="right">学科分类</el-button>
       </router-link>
       <router-link :to="{path:'tags',query:{...row}}">
          <el-button type="text" size="small" class="right">标签管理</el-button>
       </router-link>
        <el-button type="text" size="small" @click="updated(row)" class="right">修改</el-button>
        <el-button type="text" size="small" @click="removed(row)" class="right">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
        <!-- 分页 -->
        <div class="pagination">
          <PageTool
            :paginationPage="requestParameters.page"
            :paginationPagesize="requestParameters.pagesize"
            :total="total"
            @pageChange="handleCurrentChange"
            @pageSizeChange="handleSizeChange"
          ></PageTool>
        </div>
        <!-- end -->
        <!-- 新增标签弹层 -->
        <!-- <component></component> -->
    <el-dialog :title="newname"
        :visible.sync="dialogFormVisible"
        width="30%"
        @close="btncancel"
        >
      <el-form :model="forms"  :rules="rules" ref="forms">
        <el-form-item label="学科名称" :label-width="formLabelWidth"  prop="subjectName">
          <el-input v-model="forms.subjectName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否显示" :label-width="formLabelWidth">
          <el-switch
      v-model="forms.isFrontDisplay">
      </el-switch>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="btncancel">取 消</el-button>
          <el-button type="primary" @click="btnok">确 定</el-button>
        </div>
      </el-dialog>
      </el-card>
    </div>
  </div>
</template>
<script>
// 引入api发送请求
import { list, add, update, detail, remove } from '@/api/hmmm/subjects.js'
// import { parseTime } from '../../filters'
// 引入公共的页码条组件
import PageTool from '@/module-dashboard/components/pageTool.vue'
import moment from 'moment'
export default {
  name: 'Subject',
  data () {
    return {
      requestParameters: {
        subjectName: '',
        page: 1,
        pagesize: 10
      },
      search: '',
      // 定义空数组接收数据
      tableData: [],
      total: null,
      dialogFormVisible: false,
      forms: {
        subjectName: '',
        isFrontDisplay: 1
      },
      newname: '新增学科',
      formLabelWidth: '120px',
      rules: { subjectName: [{ required: true, message: '请输入学科名称', trigger: 'blur' }] }
    }
  },
  // computed: {
  //   // value () {
  //   //   return this.forms.isFrontDisplay === 1
  //   // }
  //   value: {
  //     // get() 用于获取计算结果
  //     get () {
  //       return this.forms.isFrontDisplay === 1
  //     },
  //     // set() 用于修改计算结果
  //     set (value) {
  //       this.forms.isFrontDisplay = value
  //     }
  //   }
  // },
  // a
  components: { PageTool },
  created () {
    this.getList()
  },
  methods: {
    async getList () {
      const { data } = await list(this.requestParameters)
      console.log(data)
      this.tableData = data.items
      // 利用map方法返回新数组进行渲染
      this.tableData.map(item => {
        item.isFrontDisplay = item.isFrontDisplay === 1 ? '是' : '否'
        // 格式化时间
        // item.addDate = parseTime(item.addDate)
        item.addDate = moment(item.addDate).format('YYYY-MM-DD HH:mm:ss')
        // console.log(item)
      })
      console.log(this.tableData)
      this.total = data.counts
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.requestParameters.pagesize = val
      if (this.requestParameters.page === 1) {
        this.getList(this.requestParameters)
      }
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.requestParameters.page = val
      this.getList()
    },
    async removed (obj) {
      try {
        await this.$confirm('此操作将永远删除该学科，是否继续操作？')
        // 点击确定进入下面
        await remove(obj) // 调用删除接口
        this.getList() // 重新渲染页面
        this.$message.success('删除学科成功！')
      } catch (error) {
        console.log(error)
      }
    },
    // 修改功能 回显数据
    async updated (obj) {
      // 发起详情请求  回显数据
      const { data } = await detail(obj)
      this.forms = data
      // 修改switch绑定值类型
      this.forms.isFrontDisplay = this.forms.isFrontDisplay === 1
      // console.log(this.forms)
      // this.value = this.forms.isFrontDisplay
      if (this.forms.id) {
        this.newname = '修改学科'
      }
      this.dialogFormVisible = true
    },
    async btnok () {
      try {
        await this.$refs.forms.validate()
        if (this.forms.id) {
          await update(this.forms)
          this.$message.success('修改学科成功！')
        } else {
          // console.log(this.$refs.forms)
          // 新增学科功能
          await add(this.forms)
          // 添加数据后重新渲染页面
          this.getList()
          this.$message.success('新增学科成功！')
        }
        this.getList()
        this.dialogFormVisible = false
        // console.log(this.forms)
      } catch (error) {
        console.log(error)
      }
    },
    btncancel () {
      // 点击取消清空表单
      this.forms = {
        subjectName: '',
        isFrontDisplay: 0
      }
      // 移除校验规则
      this.$refs.forms.resetFields()
      // 关闭弹层
      this.dialogFormVisible = false
    },
    // 清空搜索框内容
    empty () {
      this.search = ''
    },
    async searchitem () {
      if (this.search === '') {
        return this.getList()
      }
      const arr = []
      this.tableData.forEach(item => {
        // console.log(item.subjectName.includes(this.search))
        if (item.subjectName.includes(this.search)) {
          arr.push(item)
        }
      })
      // console.log(arr)
      // 把数组赋值给渲染页面的数组
      this.tableData = arr
      // 修改传入组件的条数
      this.total = arr.length
    }
  }
}
</script>
<style lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 10px;
  // text-align: right;
}
</style>

<style>
.el-table th {
  background-color: #fafafa;
}
.el-table th.is-leaf {
  border-bottom: 2px solid #e8e8e8;
}
/* .el-form-item {
  margin-bottom: 0;
} */
.disabled td {
  background-color: #f9f9f9;
  color: #c1c1c1;
}
.disabled .el-button--primary,
.disabled .el-button--danger {
  background-color: #dbdada;
  border: 1px solid #dbdada;
  color: #999;
  cursor: not-allowed;
}
.right {
  margin-right: 5px;
}
</style>